import React from 'react';
import { Form, Input, Select, Row, Col, DatePicker, message, Icon, Upload, Button } from 'antd';
import { connect } from 'dva';
// import TableData from '../../components/tableDatas';
import { Table } from 'antd';
import orderStatus from '../../common/database';
import { getLoginToken } from '../../utils/utils';
import styles from './index.less';
import moment from 'moment';

const { Option } = Select;
const namespace = 'returnManagement';
/**
 *  登录界面
 */
@connect(({ loading, returnManagement }) => {
  return {
    //控制状态，绑定事件
    loading: loading.effects['returnManagement/fetch'],
    dataList: returnManagement.dataList,
    pagination: returnManagement.pagination
  };
})
@Form.create()
class All extends React.Component {
  state = {
    sortOrder: 'descend',
    tips: [
      {
        id: 0,
        title: 'Estimated Refund',
        money: '$50.00'
      },
      {
        id: 1,
        title: 'Order payment',
        money: '$350.00'
      },
      {
        id: 2,
        title: 'Standard Delivery change',
        money: '-$50.00'
      },
      {
        id: 3,
        title: 'Return cost',
        money: '-$50.00'
      }
    ]
  };

  // 搜索
  handleSubmit(e) {
    e && e.preventDefault();
    this.props.form.validateFieldsAndScroll((err, values) => {
      if (!err) {
        values.orderDate = values.orderDate ? values.orderDate.format('YYYY-MM-DD') : values.orderDate;
        // values.status = values.status === '0' ? '' : values.status;
        console.log('Received values of form: ', values);
        this.props.dispatch({
          type: `${namespace}/fetch`,
          payload: { ...values, pageNum: 1 }
        });
      }
    });
  }
  // 清楚搜索框
  handleReset = () => {
    const { form } = this.props;
    form.resetFields();
    this.handleSubmit();
  };
  // 导入
  handleUpload(file) {
    this.props.dispatch({
      type: `${namespace}/uploadTemplate`,
      payload: {
        file
      }
    });
  }
  render() {
    const { getFieldDecorator } = this.props.form;
    const { loading, dataList, pagination, handleDrawer } = this.props;

    const formItemLayout = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 24 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 24 }
      }
    };

    const config = {
      rules: [{ type: 'object', required: false, message: 'Please select time!' }]
    };

    const columns = [
      {
        title: 'Order number',
        dataIndex: 'orderNumber',
        key: 'orderNumber'
        // render: (text, record) => (
        //   <a
        //     className={styles.orderNumber}
        //     onClick={() => handleDrawer(record)}
        //     style={record.remind ? { color: '#B80B12' } : {}}
        //   >
        //     {record.remind ? <Icon type="bell" theme="filled" style={{ marginRight: 5 }} /> : null}
        //     {text}
        //   </a>
        // )
      },
      {
        title: 'Order date',
        dataIndex: 'orderDate',
        key: 'orderDate',
        sorter: true,
        render: text => <span>{moment(text).format('DD/MM/YYYY')}</span>
      },
      {
        title: 'Product name',
        key: 'name',
        dataIndex: 'name'
      },
      {
        title: 'SKU number',
        dataIndex: 'skuNumber',
        key: 'skuNumber'
      },
      {
        title: 'QTY',
        dataIndex: 'qty',
        key: 'qty'
      },
      {
        title: 'Total',
        dataIndex: 'total',
        key: 'total',
        render: text => {
          text = Number(text);
          if (!text) return '--';
          return <span>${text.toFixed(2)}</span>;
        }
      }
    ];

    const tableProps = {
      columns,
      dataSource: dataList,
      loading,
      pagination: {
        total: pagination.total,
        current: pagination.current,
        pageSize: pagination.pageSize,
        hideOnSinglePage: true,
        showQuickJumper: true,
        showSizeChanger: true
      },
      rowClassName: 'rows',
      rowKey: 'id',
      onChange: (pagination, filters, sorter, extra) => {
        let sort = '';
        if (sorter.order) {
          sort = sorter.order === 'descend' ? 'DESC' : 'ASC';
        }
        this.props.dispatch({
          type: `${namespace}/fetch`,
          payload: {
            pageNum: pagination.current,
            pageSize: pagination.pageSize,
            sort
          }
        });
      }
    };
    const props = {
      name: 'file',
      action: `${process.env.apiTest}/order/import`,
      headers: {
        Authorization: getLoginToken() ? getLoginToken() : ''
      },
      showUploadList: false,
      onChange: file => {
        if (file.file.status === 'done') {
          const res = file.file.response;
          if (res.code === 200) {
            message.success(res.msg || 'Operation succeeded');
            this.props.dispatch({
              type: `${namespace}/fetch`
            });
          } else {
            message.error(res.msg || '失败');
          }
        }
      }
    };
    return (
      <div className={styles.formItem}>
        <Form {...formItemLayout} onSubmit={e => this.handleSubmit(e)}>
          <Row gutter={16}>
            <Col className="gutter-row" span={4}>
              <Form.Item label="Order number">{getFieldDecorator('orderNumber', {})(<Input />)}</Form.Item>
            </Col>
            <Col className="gutter-row" span={4}>
              <Form.Item label="Order date">{getFieldDecorator('orderDate', config)(<DatePicker />)}</Form.Item>
            </Col>
            <Col className="gutter-row" span={4}>
              <Form.Item label="SKU number">{getFieldDecorator('skuNumber', {})(<Input />)}</Form.Item>
            </Col>
            <Col className="gutter-row searchBtn" span={12}>
              <Form.Item>
                <Button htmlType="submit" className="login-form-button searchBtns">
                  Search
                </Button>
              </Form.Item>
              <Form.Item>
                <Button htmlType="reset" onClick={this.handleReset} className="login-form-button resetBtn">
                  Reset
                </Button>
              </Form.Item>
              <Form.Item>
                <Upload {...props}>
                  <Button className="uploadBtn">
                    <Icon type="upload" /> Upload
                  </Button>
                </Upload>
              </Form.Item>
            </Col>
          </Row>
        </Form>
        <Table {...tableProps} />
      </div>
    );
  }
}
export default All;
